<template>
	<view class="container">
		<nav-top :title="navTitle" :type="navType" />
		<view class="content">
			<view v-if="JSON.stringify(defaultAddress)!=='{}'" class="default-address address">
				<text class="desc">默认地址</text>
				<view class="address-list">
					<view class="address-item">
						<text class="detail-address">{{defaultAddress.ad}}</text>
						<view class="detail">
							<text class="name">{{defaultAddress.name}}</text>
							<text class="gender">{{defaultAddress.gender==="MALE"?"男":"女"}}</text>
							<text class="phone">{{defaultAddress.phone}}</text>
						</view>
						<image class="edit" src="@/static/images/my/edit@2x.png"
							@click="toAddAddress(defaultAddress.id)"></image>
					</view>
				</view>
			</view>
			<view class="other-address address">
				<text class="desc">其他地址</text>
				<view class="address-list" v-for="item in otherAddress" :key="item.id">
					<view class="address-item">
						<text class="detail-address">{{item.ad}}</text>
						<view class="detail">
							<text class="name">{{item.name}}</text>
							<text class="gender">{{item.gender==="MALE"?"男":"女"}}</text>
							<text class="phone">{{item.phone}}</text>
						</view>
						<image class="edit" src="@/static/images/my/edit@2x.png" @click="toAddAddress(item.id)"></image>

					</view>
				</view>
			</view>

			<image class="add-address" @click="toAddAddress" src="@/static/images/my/addAddress@2x.png"></image>
		</view>

	</view>
</template>

<script setup>
	import request from "@/Api/request.js"
	import {onLoad} from "@dcloudio/uni-app"
	import {
		reactive
	} from "vue";
	const navTitle = "我的地址";
	const navType = "commen";
	let defaultAddress = reactive({})
	let otherAddress = reactive([])
	
	onLoad((options)=>{
		
		request({
			url: "/address",
			method: "GET"
		}).then((res) => {
			console.log(res);
			for (let i of res) {
				if (i.def) {
					defaultAddress = i
				} else {
					otherAddress.push(i)
				}
			}
			if(JSON.stringify(defaultAddress)==="{}"){
				console.log("a");
			}else{
				console.log("b");
			}
		})
		
	})

	function toAddAddress(addressId) {
		if (addressId) {
			uni.navigateTo({
				url: `/pages/My/AddAddress/AddAddress?addressId=${addressId}`,
			})
		} else {


			uni.navigateTo({
				url: "/pages/My/AddAddress/AddAddress",
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/commen.scss";

	.container {
		height: 100vh;
		position: relative;
	}

	.content {
		width: 100%;
	}

	.address {
		padding-top: 16rpx;

		.desc {
			@include font-base(26rpx, #999999);
			padding-left: 32rpx;
		}

		.address-list {
			display: flex;
			flex-direction: column;
			gap: 24rpx;

			.address-item {
				width: 100%;
				position: relative;
				padding: 32rpx;
				display: flex;
				flex-direction: column;
				gap: 8rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-top: 24rpx
			}

			.detail-address {
				@include font-base(28rpx, #333333, 600)
			}

			.detail {
				@include font-base(24rpx, #999999, 400);

				display: flex;
				gap: 16rpx;
			}

			.edit {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 32rpx;
				transform: translateY(50%);
			}
		}
	}

	.add-address {
		width: calc(100% - 64rpx);
		height: 104rpx;
		position: absolute;
		bottom: 0rpx;
	}
</style>